<template>
    <FormSection @store="store">
        <template slot="title">发布新文章</template>
        <template slot="input-group">
            <div class="form-group">
                <Label name="title" label="标题"></Label>
                <InputText name="title" v-model="form.title" @keyup="clear('title')"></InputText>
                <ErrorMsg :error="form.errors.get('title')"></ErrorMsg>
            </div>
            <div class="form-group">
                <Label name="author" label="作者"></Label>
                <InputText name="title" v-model="form.author" @keyup="clear('author')"></InputText>
                <ErrorMsg :error="form.errors.get('author')"></ErrorMsg>
            </div>
            <div class="form-group">
                <Label name="content" label="内容"></Label>
                <InputText name="title" v-model="form.content" @keyup="clear('content')"></InputText>
                <ErrorMsg :error="form.errors.get('content')"></ErrorMsg>
            </div>
        </template>
        <template slot="action">
            <Button type="submit">立即发布</Button>
        </template>
        <template slot="toast">
            <SuccessMsg :success="form.success">文章发布成功。</SuccessMsg>
        </template>
    </FormSection>
</template>

<script>
import FormSection from './form/FormSection';
import InputText from './form/InputText';
import TextArea from './form/TextArea';
import Button from './form/Button';
import SuccessMsg from './form/SuccessMsg'
import Label from './form/Label';
import ErrorMsg from './form/ErrorMsg';
export default {
    components: {FormSection, InputText, TextArea, Label, ErrorMsg, Button, SuccessMsg},
    props: ['author'],
    data() {
        return {
            form: new Form({
                title: '',
                author: this.author,
                content:''
            })
        }
    },
    methods:{
        store(){
            this.form.post('/post')
            .then((data) => {
                console.log(data);
            }).catch((data) => {
                console.log(data);
            });
        },

        clear(field){
            this.form.errors.clear(field);
        }
    }
}
</script>
